// ....................................
// 1.值变量
// ....................................
@w: 200px;
@h: 200px;
@bgc: red;

#div {
  width: @w; // width:200px
  height: @h + 50px;
  height: @h - 50px;
  height: @h * 50px;
  height: (@h / 50px);
  background-color: @bgc;
}
// ....................................
// 2.变量作用域(就近原则)
// ....................................
@w: 400px;

#div {
  width: @w; // width:400px
}

#div1 {
  @w: 300px;
  width: @w; // width:300px
}
// ....................................
// 3.选择器变量
// ....................................
@d1: #div1;
@d2: .div2;

@{d1} {
  width: 100px;
}

#div1 {
  width: 100px;
}

@{d2} {
  width: 200px;
}

.div2 {
  width: 200px;
}
// ....................................
// 4.属性变量
// ....................................
@mr: margin-right;

#div {
  @{mr}: 10px; // margin-right: 10px;
}
// ....................................
// 5.url变量
// ....................................
@url: url("http://www.baidu.com");
@url_1: "../../assets/img";

#div {
  background-image: @url; //值变量用法
  background-image: url("@{url_1}/logo.png");
}
// ....................................
// 6.声明变量
// ....................................
@flex: {
  display: flex;
  align-items: center;
  justify-content: center;
}

#div {
  @flex();
}
// ....................................
// 7.变量定义变量
// ....................................
@content: "Hello World";
@var: "content";

#div::after {
  content: @@var; //content:"Hello World"
}
// ....................................
// 8.嵌套
// ....................................
#div {
  .div1 {
    width: 100px;
  }

  .div2 {
    width: 200px;

    // 伪类
    &:hover {
      width: 300px;
    }
  }

  .div3 {
    width: 300px;

    // 伪类
    &::after {
      content: "Hello World";
    }
  }
}
// ....................................
// 9.媒体查询
// ....................................
#div {
  width: 500px;

  @media screen {
    @media (min-width: 768px) {
      width: 100px;
    }

    @media (min-width: 480px) {
      width: 60px;
    }
  }
}

#div {
  width: 500px;

  @media screen and (min-width: 768px) {
    width: 100px;
  }

  @media screen and (min-width: 480px) {
    width: 60px;
  }
}

// 原生写法
#div {
  width: 500px;
}

@media screen and (min-width: 768px) {
  #div {
    width: 100px;
  }
}

@media screen and (min-width: 480px) {
  #div {
    width: 60px;
  }
}
// ....................................
// 10.混合
// ....................................
.var {
  width: 100px;
  height: 200px;
  color: aquamarine;
}

#div {
  // 不带参数的混合
  .var; // width: 100px;height: 200px;color: aquamarine;

  // 带参数的混合
  .var(@a: 10px, @b: 20px, @c: red) // width: 10px;height: 20px;color: red;
}
// ....................................
// 11.方法的匹配模式
// ....................................
.test(left, @a, @b, @c) {
  border-left: 1px solid red;
  width: @a;
  height: @b;
  color: @c;
}
.test(right, @a, @b，@c) {
  border-right: 1px solid blue;
  width: @a;
  height: @b;
  color: @c;
}
// ....................................
.test(right, @a, @b, @c) when (@a > 10px) and (@b > 10px) {
  border-left: 1px solid red;
  width: @a;
  height: @b;
  color: @c;
}
.test(right, @a, @b，@c) when (@a > 10px) {
  border-right: 1px solid blue;
  width: @a;
  height: @b;
  color: @c;
}
// 数量不定的参数
.test(@a,...){
  border: 1px solid yellow;
  width: @a;
  margin: @arguments;
}
// ....................................m
#div{
  // 匹配参数最相似的方法
  .test(left, 10px, 20px, red);
  // 不仅仅是参数最相似，而且参数也满足when条件，才会匹配
  // 与：when (xx) and (xx)
  // 或：when (xx),(xx)
  // 非：when not (xx)
  .test(right, 20px, 30px, blue);
  .test(1px,2px,3px,4px,5px);//数量不定的参数,boeder: 1px solid yellow;width: 1px;margin: 2px 3px 4px 5px;
}
// ....................................
// @import 可以导入文件
// ....................................
@import "./index.less";
@import url("./index.less");